<!DOCTYPE html>
<html>
<head>
    <!-- 引入jquery开发包 -->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        $(function(){

            var paramdate = "";
            //请求得到数据
            $.ajax({
                type: "post",
                url: "/sys/generator/readparam",    //向后端请求数据的url
                data: {gh : "19931119"},
                async: false,
                success: function (data) {
                    paramdate = data;
                }
            });

            var strArr = paramdate.split("&");
            for(var i=0;i<strArr.length;i++){
                var tempArr = strArr[i].split("@");
                var paramid = "";
                var param = "";
                var value = "";
                paramid = tempArr[0];
                param = tempArr[1];
                value = tempArr[2];
                var tr = $("<tr><td></td><td><input type=\"text\" id=\"paramid"+(i+1)+"\" value = "+ paramid +"  /></td><td><input type=\"text\" id=\"param"+(i+1)+"\" value = "+ param +" /></td><td><input type=\"text\" id=\"value"+(i+1)+"\" value = "+ value +" /></td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>");
                $("table").append(tr);
            }


            var len = $('table tr').length;
            for(var i = 1;i<len;i++){
                $('table tr:eq('+i+') td:first').text(i);
            }

            // 添加 click事件
            $("#addparam").click(function(){
                var xh = len;
                // 在table 中生成tr
                var tr = $("<tr><td>"+ xh +"</td><td><input type=\"text\" id=\"paramid"+xh+"\"/></td><td><input type=\"text\" id=\"param"+xh+"\" /></td><td><input type=\"text\" id=\"value"+xh+"\" /></td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>");
                $("table").append(tr);

                // form重置，清除刚才表单填写的内容
                $("form")[0].reset();
                len ++;
            });

            //保存参数
            $("#saveparam").click(function () {

                var len = $('table tr').length;
                var str = "";
                for(var i = 1;i<len;i++){
                    var paramid = $("#paramid"+i).val();
                    var param = $("#param"+i).val();
                    var value = $("#value"+i).val();

                    if(paramid != ""){
                        var temp =  paramid + '@' + param + '@' + value + '&';
                        str = str + temp;
                    }
                }

                if(str != ''){
                    str = str.substr(0,str.length-1);
                }

                //请求得到数据
                $.ajax({
                    type: "post",
                    url: "/sys/generator/writeParam",    //向后端请求数据的url
                    data: {
                        gh : "19931119",
                        param : str
                    },
                    async: false,
                    success: function (data) {
                        if(data.code == 1){
                            alert("保存成功");
                        }else{
                            alert("保存失败");
                        }
                    }
                });

            });
        });

        // 删除
        function deleteItem(a){
            // 删除 a 元素所在行
            $(a).parents("tr").remove();
        }
    </script>
</head>
<body>
<div align="center">
    <h3>添加用户</h3>
    <form>
        姓名 <input type="text" name="name" />
        邮箱 <input type="text" name="email" />
        电话 <input type="text" name="phone" /> <br/>
        <input type="button" value="提交" id="addBtn" />
    </form>
    <hr/>
    <input type="button" value="增加属性" id="addparam" />
    <input type="button" value="保存属性" id="saveparam" />
    <table border="1">
        <tr>
            <th>序号</th>
            <th>属性占位符</th>
            <th>属性意义</th>
            <th>模板值</th>
            <th>删除</th>
        </tr>
    </table>
</div>
</body>
</html>